<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=\, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div class="container">
      111
      <div class="box">
        <div>
          111
          <div>222</div>
        </div>
        <p>我是段落</p>
        我是文本
        <div>333</div>
      </div>
    </div>
    <script>
      //一.子关系 : 1.子元素  2.子节点\
      //一.子关系
      //1.所有的子节点  元素.childNodes;
      // var boxEle = document.querySelector(".box");
      // console.log(boxEle.childNodes);

      //2.获取所有的子元素  元素.children
      // var boxEle = document.querySelector(".box");
      // console.log(boxEle.children); //div p div

      //3.获取第一个子节点: 元素.firstChild
      // var boxEle = document.querySelector(".box");
      // console.log(boxEle.firstChild);

      //4.获取第一个子元素   元素.firstElementChild
      // var boxEle = document.querySelector(".box");
      // console.log(boxEle.firstElementChild);

      //5.获取最后一个子节点  元素.lastChild
      // var boxEle = document.querySelector(".box");
      // console.log(boxEle.lastChild);

      //6.获取最后一个子元素  元素.lastElementChild
      // var boxEle = document.querySelector(".box");
      // console.log(boxEle.lastElementChild);

      //二.父关系

      //1.父节点 :  parentNode ,父节点需要获取一个容器,父节点获取到的也是父元素
      var boxEle = document.querySelector(".box");
      console.dir(boxEle.parentNode); //包含父节点里面的所有元素

      //2.父元素: parentElement 返回当前节点的父元素节点，如果该元素没有父节点，或者父节点不是一个 DOM 元素，则返回 null。
      var boxEle = document.querySelector(".box");
      console.dir(boxEle.parentElement);
    </script>
  </body>
</html>
